<!--  -->
<template>
  <div class="edit-book-main">
    <el-dialog title="添加图书/修改图书信息" :visible.sync="dialogvis" @close="!dialogvis" width="40%">
      <el-form v-model="form" ref="form" label-position="right" height="300">
        <el-form-item prop="isbn" label="图书isbn" :label-width="labelWidth" v-if="addOrUpdateTag">
          <el-input v-model="form.isbn" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书名" :label-width="labelWidth" prop="title">
          <el-input v-model="form.title" auto-complete="off" placeholder="不加《》"></el-input>
        </el-form-item>
        <el-form-item label="作者" :label-width="labelWidth" prop="author">
          <el-input v-model="form.author" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="出版日期" :label-width="labelWidth" prop="date">
          <el-input v-model="form.date" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="出版社" :label-width="labelWidth" prop="press">
          <el-input v-model="form.press" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否被借走" :label-width="labelWidth" prop="isborrow">
          <el-input v-model="form.isborrow" autocomplete="off" placeholder="0代表没有被借走，1代表被借走"></el-input>
        </el-form-item>
        <el-form-item label="封面" :label-width="labelWidth" prop="cover">
          <el-input v-model="form.cover" autocomplete="off" placeholder="图片 URL"></el-input>
          <img-upload @onUpload="uploadImg" ref="imgUpload" v-on:onUpload="uploadImg"></img-upload>
        </el-form-item>
        <el-form-item label="简介" :label-width="labelWidth" prop="abs">
          <el-input type="textarea" v-model="form.abs" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="RFID编号" :label-width="labelWidth" prop="rfid">
          <el-autocomplete
              v-model="form.rfid"
              :fetch-suggestions="querySearchAsync"
              placeholder="请扫描RFID标签"
          >
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="选择仓库" :label-width="labelWidth">
          <el-select v-model="form.id"
                     @change="getPosition"
                     placeholder="请选择您的入库方式">
            <el-option
                v-for="item in warehouseId"
                :key="item.id"
                :label="item.num"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <!--级联选择器-->
        <el-form-item label="存储位置" :label-width="labelWidth">
          <div class="block">
            <span class="demonstration"></span>
            <el-cascader
                placeholder="请输入"
                :options="position"
                :props="{ multiple: true }"
                filterable
                v-model="form.pid"></el-cascader>
          </div>
        </el-form-item>
        <el-form-item label="分类" :label-width="labelWidth" prop="cid">
          <el-select v-model="form.category.id" placeholder="请选择分类">
            <el-option label="文学" value="1"></el-option>
            <el-option label="流行" value="2"></el-option>
            <el-option label="文化" value="3"></el-option>
            <el-option label="生活" value="4"></el-option>
            <el-option label="经管" value="5"></el-option>
            <el-option label="科技" value="6"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">取消</el-button>
        <el-button @click="onSubmit" type="primary">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ImgUpload from "./ImgUpload";
import {Message, MessageBox} from "element-ui";

export default {
  name: "editBookForm",
  data() {
    return {
      labelWidth: "90px",
      queryInfo1: {
        name: '',
        state: 0
      },
      query: {
        id: '',
      },
      warehouseId: [],
      position: [],
      // addOrUpdateTag: !this.form.title ? 1 : 0,
      addFormRules: {
        username: [{required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 16, message: "长度在3到16个字符", trigger: "blur"}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'},
          {min: 3, max: 10, message: "长度在3到10个字符", trigger: "blur"}],
        name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
        phone: [{required: true, message: '请输入您的联系方式', trigger: 'blur'},
          {min: 11, max: 11, message: "格式错误", trigger: "blur"}],
        /*email: [{required: true, message: '请输入您的邮箱', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur'}]*/
      },
    };
  },
  props: {
    form: Object,
    dialogFormVisible: Boolean
  },
  components: {
    ImgUpload
  },
  computed: {
    //添加或者更新的标志
    addOrUpdateTag() {
      console.log(this.form.isbn)
      //添加的为1,修改的为0
      let res = !!this.form.tag ? 1 : 0;
      return res;
    },
    dialogvis: {
      get() {
        return this.dialogFormVisible;
      },
      //这里的val就是dialogvis的最新值
      set(val) {
        this.$emit("changedv", val);
      }
    }
  },
  methods: {
    //添加图书
    async onSubmit() {
      let param = {
        isbn: this.form.isbn,
        cover: this.form.cover,
        title: this.form.title,
        author: this.form.author,
        date: this.form.date,
        press: this.form.press,
        abs: this.form.abs,
        cid: this.form.category.id,
        isborrow: Number(this.form.isborrow),
      }
      let api = this.addOrUpdateTag === 1 ? `addBook` : `updateBook`;
      //添加图书
      const res = await this.$http.post(`/api/${api}`, param)
          .then(res => {
            if (res && res.status === 200) {
              console.log(res)
              Message.success("操作成功！");
              /*this.$message({
                message: "操作成功！",
                type: "success"
              });*/
              this.$emit("changedv", false); //关闭对话框
            }
          })
          .catch(error => {
            console.log(error);
          });
    },
    //远程查询RFID编号
    async querySearchAsync(queryString, cb) {
      this.queryInfo1.name = queryString + "";
      console.log(queryString);
      const res = await this.$http.get('/warehouse/RFID/', {params: this.queryInfo1});
      console.log(res);
      for (let i of res.obj) {
        // i.value = i.name + '(数量:' + i.complete + '单号' + i.orderNum + ')';
        i.value = i.data;
      }
      console.log(res.obj)
      cb(res.obj);
    },
    async getPosition() {
      console.log(this.query.id);
      const res = await this.$http.get('/warehouse/position/', {params: this.query});
      this.position = res.obj;
      console.log(res);
    },
    async location(item) {
      //console.log(item.id);
      this.locationDialog = true;
      const res = await this.$http.get('/goods/goodsPosition/' + item.id);
      if (res) {
        this.locations = res.obj;
      }

    },
    //上传图片
    uploadImg(url) {
      this.form.cover = url;
    },
    closeDialog() {
      this.dialogvis = false;
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.edit-book-main {
  text-align: left;
}

.el-input {
  float: left;
}
</style>